<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <div class="flex w-1/3 p-6 shadow-lg rounded-lg flex-col bg-white">
      <re-input title="姓名" titleWidth="6">
        <el-input placeholder="请输入内容" v-model="staffInfo.name" />
      </re-input>
      <re-input title="用户名" titleWidth="6" style="margin-top: 1.5rem">
        <el-input
          placeholder="请输入内容"
          v-model="staffInfo.userName"
          disabled
        />
      </re-input>
      <re-input title="学号" titleWidth="6" style="margin-top: 1.5rem">
        <el-input placeholder="请输入内容" v-model="staffInfo.staffNumber" />
      </re-input>
      <el-button
        style="margin-top: 1.5rem"
        type="primary"
        icon="el-icon-upload"
        @click="clickSumbit()"
        >提交
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive } from "vue";
import { getInfo, updateSelf, UserUpdateDTO } from "/@/api/staff";
import ReInput from "/@/components/ReInput/index.vue";
import { errorMessage, successMessage } from "/@/utils/message";
import { storageSession } from "/@/utils/storage";
export default {
  components: {
    ReInput
  },
  setup() {
    const staffInfo = reactive<UserUpdateDTO>({
      id: null,
      userName: "",
      staffNumber: "",
      name: ""
    });

    const clickSumbit = async () => {
      const res = await updateSelf(staffInfo);
      if (res.code === 1) {
        successMessage(res.message);
        const info = storageSession.getItem("info");
        info["username"] = staffInfo.name;
        storageSession.setItem("info", info);
        location.reload();
      } else {
        errorMessage(res.message);
      }
    };

    const getUserInfo = async () => {
      const res = await getInfo();
      if (res.code === 1) {
        const data = res.response as UserUpdateDTO;
        staffInfo.id = data.id;
        staffInfo.userName = data.userName;
        staffInfo.staffNumber = data.staffNumber;
        staffInfo.name = data.name;
      }
    };

    onMounted(() => {
      getUserInfo();
    });
    return {
      staffInfo,
      clickSumbit
    };
  }
};
</script>

<style scoped></style>
